<template>
	<view>
		<uni-nav-bar left-icon="left"  :statusBar="true" titleSize="30px" leftText="返回" rightText="新建"   title="维修" @clickRight="addFn"  @clickLeft="back"  :fixed="true" backgroundColor="#3286ed" color="#fff"/>
	    <!-- 筛选 -->
	    <view  v-if="searchShow===false">
	    	<view style="position: fixed;z-index: 100;width:100%;">
	    		<uni-row class="demo-uni-row">
	    			<uni-col :span="10">
	    				<zb-dropdown-menu  style="width: 100%" z-index="12">
	    				  <zb-dropdown-item     :options="option"   v-model="formData.repairType" @change="changeFn"></zb-dropdown-item>
	    				</zb-dropdown-menu>
	    			</uni-col>
	    			<uni-col :span="1">
	    				<view class="title"  style="color:#c3c3c3">|</view>
	    			</uni-col>
	    			<uni-col :span="6">
	    				<view class="title" @click="searchBtn">筛选</view>
	    			</uni-col>
	    			<uni-col :span="1">
	    				<view class="title"  style="color:#c3c3c3">|</view>
	    			</uni-col>
	    			<uni-col :span="6">
	    				<view class="title">
	    					<uni-icons @click="magnifierBtn" type="search" size="24" color="#c3c3c3"></uni-icons>
	    				</view>
	    			</uni-col>
	    		</uni-row>
	    	</view>
	    	<view  v-if="searchShow===false" style="width:100%;height: 88rpx;display: block;margin-bottom: 10px;"></view>
	    </view>
		<view>
			<u-search  v-if="searchShow===true" style="height;40px;background-color: #fff;padding: 10px;" @clear="clearFn" :clearabled="true" showAction @custom="customFn" @search="inputSearchBtn" v-model.enter="formData.repairNo" height='30' placeholder="请输入维修编码" shape="square" actionText='取消'></u-search>
		</view>
		<!-- 列表 -->
		 <u-swipe-action>
			 <view v-for="(item,index) in list" :key="item.id">
				 <u-swipe-action-item :options="options1" :disabled="disabledShow" @click="delFn(item.id)" >
				    <view class="list"  @click="detailsBtn(item.id)">
				 	   <view class="title" >维修编号：{{item.repairNo}}</view>
				 	   <view class="desc">机器编号:{{item.machineNo}}</view>
				 	   <view class="desc">租赁订单编号:{{item.orderNo}}</view>
				 	   <view class="desc">维修类型:
							   <span v-if="item.repairType==0">维修</span>
							   <span  v-if="item.repairType==1">退回</span>
					   </view>
				    </view>
				 </u-swipe-action-item>
			 </view>
		</u-swipe-action>
		<view v-if="list.length ==0 && searchShow==false" class="BGC"></view>
		<!-- 消息提示 -->
		<u-toast ref="uToast"></u-toast>
		<!-- 右边 -->
		<u-popup :show="isShow" customStyle="margin-top:44px;min-width:300px;" overlayStyle="margin-top:44px"  mode="right"  :closeOnClickOverlay="true" @close="closeBtn" >
			 <view class="popup">
				 <view>
					 <u-cell>
						 <template #title>
							 <view>机器编号</view>
						 </template>
					 </u-cell>
					 <view style="padding: 10px;border-bottom: solid 1px #c3c3c3;" >
						   <u--input   placeholder="请输入内容"    v-model="formData.machineNo"></u--input>
					 </view>
				 </view>
				 <view>
					 <u-cell>
						 <template #title>
							 <view>订单编号</view>
						 </template>
					 </u-cell>
					 <view style="padding: 10px;border-bottom: solid 1px #c3c3c3;" >
						   <u--input   placeholder="请输入内容"    v-model="formData.orderNo"></u--input>
					 </view>
				 </view>
				
				 <!-- button -->
				 <view class="button">
					 <view class="btn" style="border-right: solid 1px #c3c3c3;" @click="resetBtn">重置</view>
					 <view class="btn" @click="btnOk">确认</view>
				 </view>
			
			 </view>
		</u-popup>
		
	</view>
</template>

<script>
	import {repairListApi,delRepairApi} from '@/api/repair.js'
	export default {
		data(){
			return{
				formData:{
					pageNum:1,
					pageSize:5,
					repairType:'',
					machineNo:'',
					orderNo:'',
				},
				total:0,
				list:[],
				permissions:[],
				option:[
					{text:'维修类型',value:''},
					{text:'维修',value:0},
					{text:'退回',value:1},
					],
				searchShow:false,
				isShow:false,
				disabledShow:true,
				options1:[{text:'删除'}]
				
			}
		},
		onLoad(e){
			this.initData()
			this.permissions=this.$store.getters.permissions
			this.formData.machineNo=JSON.parse(e.info).split(',')[0]
			this.formData.orderNo=JSON.parse(e.info).split(',')[1]
			// 控制删除按钮权限出现
			if(this.permissions.includes('*:*:*') ||this.permissions.includes('module:repairRecord:delete')){
			     this.disabledShow=false
			}
		},
		onReachBottom(){
			// 上划加载
			if(this.list.length==this.total){
				this.formData.pageNum=1
				return false
			}
			this.formData.pageNum++
			repairListApi(this.formData).then(response=>{
				console.log(response);
				this.list.push(...response.rows)
				 console.log(this.list);
			})
			
		},
		onPullDownRefresh(){
			// 下拉加载
			this.formData.pageNum=1
			this.list=[]
			setTimeout(()=>{
				this.initData()
				uni.stopPullDownRefresh()
			},1000)
		},
		methods:{
			back(){
				uni.switchTab({
					url:"/pages/index"
				})
			},
			addFn(){
				uni.redirectTo({
					url:'/pages/repair/addRepair/index'
				})
			},
			async initData(){
				const res=await repairListApi(this.formData)
				console.log(res);
				this.list=res.rows
				this.total=res.total
			},
			// 删除
			async delFn(id){
				console.log(id);
				this.disabledShow=true
				const res=await delRepairApi(id)
				if(res.code==200){
					this.$refs.uToast.show({
						type:'success',
						message:'删除成功！',
					})
				}
				this.disabledShow=false
				this.initData()
			},
			detailsBtn(id){
				uni.navigateTo({
					url:'/pages/repair/repairRecord/index?id='+id
				})
			},
			changeFn(e){
				console.log(e);
				this.formData.machineNo='',
				this.formData.orderNo=''
				this.formData.repairType=e.value
				
				this.initData()
			},
			// 筛选
			searchBtn(){
				this.isShow=true
			},
			// 关闭右边弹框
			closeBtn(){
				this.isShow=false
				this.formData={}
			},
			resetBtn(){
				this.formData={
					pageNum:1,
					pageSize:5,
					repairType:'',
					machineNo:'',
					orderNo:'',
				}
			},
			btnOk(){
				this.initData()
				this.formData={
					pageNum:1,
					pageSize:5,
					repairType:'',
					machineNo:'',
					orderNo:'',
					repairNo:''
				}
				this.isShow=false
			},
			magnifierBtn(){
				this.searchShow=true
				this.list=[]
			},
			clearFn(){
				this.formData.repairNo=''
				this.list=[]
			},
			customFn(){
				this.formData.repairNo=''
				this.list=[]
				this.searchShow=false
				this.initData()
			},
			inputSearchBtn(val){
				this.formData.repairNo=val
				this.initData()
			}
			
		}
	}
</script>

<style lang="scss">
	.demo-uni-row {
		margin-bottom: 10px;
			// position: fixed;
		/* QQ、字节小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
			
			.title{
				height:48px;
				line-height: 48px;
				background-color: #ffffff;
				text-align: center;
				font-size: 14px;
			}
	}
	.list{
		border: solid 1px #c3c3c3;
		padding: 10px;
		.title{
			font-size: 14px;
			font-weight: 600;
		}
		.desc{
			font-size: 12px;
		}
	}
	.BGC{
		width: 100%;
		min-height: 400px;
		background-image: url('@/static/images/bgc.png');
		background-size:100% 200px;
		background-repeat: no-repeat;
	}
	// 晒选的按钮
	.popup{
		height: 100%;
		width: 100%;
		position: relative;
		.button{
			position: absolute;
			bottom: 0;
			display: flex;
			width: 100%;
			justify-content: space-around;
			border-top: solid 1px #c3c3c3;
			.btn{
				width: 50%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				
			}
		}
	}
</style>